import { Button, Card, Flex, Form, FormProps, Input, Select, Space } from "antd"
import { CreateUserReq } from "../model/user"
import { CHARACTERS, FACTIONS, PROFESSIONS } from "../model/xyq";


function CreateUser(args: {offset: number | undefined, span: number | undefined}) {

  const onFinish = async (values: CreateUserReq) => {
    console.log('finish:', values);
  }

  return (
    <Card>
      <Form
        onFinish={onFinish}
        labelCol={{ span: args.offset }}
        wrapperCol={{ span: args.span }}
        >
        <Form.Item<CreateUserReq>
          label="角色ID"
          name="game_id"
          rules={[{ required: true, message: "请输入角色ID" }]}
          >
            <Input allowClear/>
        </Form.Item>
        <Form.Item<CreateUserReq>
          label="角色名称"
          name="game_name"
          rules={[{ required: true, message: "请输入角色名称" }]}
          >
            <Input allowClear/>
        </Form.Item>
        <Form.Item<CreateUserReq>
          label="门派"
          name="faction"
          rules={[{ required: true, message: "请选择门派" }]}
          >
            <Select options={ FACTIONS.map((v) => { 
              return {
                value: v,
                label: v
              }
             } ) }>
            </Select>
        </Form.Item>
        <Form.Item<CreateUserReq>
          label="职业"
          name="profession"
          rules={[{ required: true, message: "请选择职业" }]}
          >
            <Select options={ PROFESSIONS.map((v) => { 
              return {
                value: v,
                label: v
              }
             } ) }>
            </Select>
        </Form.Item>
        <Form.Item<CreateUserReq>
          label="角色"
          name="character"
          rules={[{ required: true, message: "请选择角色" }]}
          >
             <Select options={ CHARACTERS.map((v) => { 
              return {
                value: v,
                label: v
              }
             } ) }>
            </Select>
        </Form.Item>
        <Form.Item<CreateUserReq>
          label="备注"
          name="notes"
          initialValue={""}
          rules={[{ required: false, message: "备注信息" }]}
          >
            <Input.TextArea></Input.TextArea>
        </Form.Item>

        <Form.Item
          wrapperCol={{ offset: args.offset, span: args.span }}
          >
            <Button type="primary" htmlType="submit">登记</Button>
        </Form.Item>

      </Form>
    </Card>
  )
}

export default CreateUser

